<template>
  <div>
    <!-- <button @click="add(10)">增加</button>
        <button @click="jian(6)">减少</button>
        <p>{{this.$store.state.count}}</p> -->
    <h2>用户列表</h2>
    <!-- 用户列表 -->
    <el-table :data="arrs">
      <el-table-column prop="id" label="id"> </el-table-column>
      <el-table-column prop="name" label="姓名"> </el-table-column>
      <el-table-column prop="text" label="文本"> </el-table-column>
      <el-table-column label="操作">
        <!-- 编辑删除 -->
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
            >编辑</el-button
          >
          <el-button size="mini" @click="addfn(scope)">添加到商家</el-button>
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <!-- 弹窗 -->
    <el-dialog
      title="编辑"
      :visible.sync="dialogFormVisible"
    >
      <el-form :model="form">
        <el-form-item label="姓名" :label-width="formLabelWidth">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="文本" :label-width="formLabelWidth">
          <el-input v-model="form.text" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="fntrue">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import instance from "../../api/index";
export default {
  name: "HomeUser",
  data() {
    return {
      arrs: null,
      form: {
        id: "0",
        name: "姓名",
        text: "文本",
      },
      dialogFormVisible: false,
      formLabelWidth: "120px",
    };
  },
  methods: {
    add(a) {
      //用户行为
      // 不能直接修改count
      // this.$store.commit("increment")
      this.$store.dispatch("asyncincrement", a);
    },
    jian(b) {
      this.$store.commit("decrement", b);
    },
    async getarrs() {
      let { data } = await instance.get("/homeuser");
      console.log("用户列表", data);
      this.arrs = data;
    },
    async addfn(a) {
      console.log(a.row);
      let name = a.row.name;
      let text = a.row.text;
      let { data } = await instance.post("/homeshop", { name, text });
      console.log(data);
    },
    handleEdit(a, b){   //点击编辑按钮
        this.dialogFormVisible = !this.dialogFormVisible;
        this.form.name = b.name;
        this.form.text = b.text;
        this.form.id = b.id;
    },
    fntrue(){
        // 弹框确认按钮
        this.dialogFormVisible = false;
        this.editHomeUser()
    },
    handleDelete(a, b){ //删除按钮
        //用户行为
      console.log(a, b);
      //   this.i = i
      this.$confirm("确定删除该条信息吗", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          console.log("删除");
          this.deleteHomeUser(a);
        })
        .catch(() => {
          console.log("取消");
        });
    },
    // 编辑业务
    async editHomeUser() {
        let name = this.form.name;
        let text = this.form.text;
        let id = this.form.id;
        //   console.log("编辑业务", name, text);
        let { data } = await instance.put("/homeuser/edit/" + id, {
            name,
            text,
        });
        //   console.log(data);
        this.getarrs();
    },
    // 删除业务
    async deleteHomeUser(index) {
        let { data } = await instance.delete("/homeuser/" + index);
        console.log(data);
        this.getarrs();
    },
  },
  created() {
    this.getarrs();
  },
};
</script>
<style scoped>
</style>